//截图功能
var screenshot = {
    isCutBtn:false,//是否点击剪裁按钮
    imgInfo:"",//图像信息
    startX:0,//剪裁开始X坐标
    startY:0,//剪裁开始Y坐标
    cutWidth:0,//剪裁宽度
    cutHeight:0,//剪裁高度
    cutPanelEle:"",//剪裁范围元素名(string)
    cutPanel:"",//剪切板元素名(string)
    cutBorder:"#e5004a",
    html2Canvas:function(ele,cutPanel){
        //此方法接受两个参数：ele整个屏幕区域(document.body),cutPanel带框线的剪切板元素名(字符串)
        var _this = this;
        html2canvas(ele,{
            onrendered:function(canvas){
                var imgURL = canvas.toDataURL();//整个屏幕图片信息
                _this.isCutBtn = true;
                _this.imgInfo = imgURL;
                _this.showCutPanel(cutPanel);
                _this.cutPanel = cutPanel;
            }
        });
    },
    showCutPanel:function(ele){
        //显示剪裁面板
        $(ele).css({
            width:'100%',
            height:'100%',
            border:'2px solid red'
        });
        $(ele).show();
    },
    createDomain:function(){
        //创建剪裁范围
        var divStr = '<div id="domainDiv" style="position:fixed;z-index:2001;border:2px solid '+this.cutBorder+';"></div>';
        this.cutPanelEle = "#domainDiv";
        $(this.cutPanel).empty().append(divStr);
    },
    mousedown:function(e){
        var x = e.pageX,y=e.pageY;
        this.startX = x;
        this.startY = y;
        this.createDomain();
    },
    mousemove:function(e){
        var moveX=e.pageX,moveY = e.pageY;
        var widthDiv = moveX-this.startX,heightDiv=moveY-this.startY;
        $(this.cutPanelEle).css({
            width:widthDiv,
            height:heightDiv,
            top:this.startY,
            left:this.startX
        });
    },
    mouseleave:function(e,ele){
        //显示完成和取消按钮
        //ele 按钮元素
        var x = e.pageX,y = e.pageY;
        this.cutWidth = x - this.startX;
        this.cutHeight = y - this.startY;
        if(this.cutWidth > 10 && this.cutHeight >10){
            var eleW = ele.width();
            ele.css({
                top:y+10,
                left:x-eleW
            }).show();
        }else{
            $(this.cutPanel).hide();
            $(this.cutPanel).empty();//移除剪裁框
            this.recover();
            return;
        };
    },
    cutFinish:function(ele,callback){
        //截图完成
        var _this = this;
        var cutCanvas = document.getElementById(ele);
        //画布宽高与截图区域宽高保持一致
        cutCanvas.setAttribute('width',_this.cutWidth);
        cutCanvas.setAttribute('height',_this.cutHeight);
        var cuts = cutCanvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = this.imgInfo;
        imgObj.onload = function(){
            cuts.drawImage(this,_this.startX,_this.startY,_this.cutWidth,_this.cutHeight,0,0,_this.cutWidth,_this.cutHeight);
            var cutImgInfo = cutCanvas.toDataURL('image');
            $(_this.cutPanel).hide();
            $(_this.cutPanel).empty();//移除剪裁框
            //恢复默认
            _this.recover();
            callback(cutImgInfo);
        };
    },
    recover:function(){
        //将此对象所有属性恢复为初始值
        this.isCutBtn=false;
        this.imgInfo="";
        this.startX=0;
        this.startY=0;
        this.cutWidth=0;
        this.cutHeight=0;
        this.cutPanel="";
        this.cutPanelEle="";
        this.cutBorder = "#e5004a";
    },
    cancelCut:function(){
        //取消剪裁
        $(this.cutPanel).hide();
        $(this.cutPanel).empty();//移除剪裁框
        this.recover();
    }
};